<template>
  <div>
    <div class="swiper">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <a href="#">
            <img
              class="sImage"
              src="http://img.petshow.cc/pet_show/2016_04/75a93e4c28b8324c26141f023606631c.jpg"
              alt>
              <div class="mask"></div>
            <span>一脸懵逼样 你们可以考虑下狗的感受吗</span>
          </a>
        </van-swipe-item>
        <van-swipe-item>
          <img
            class="sImage"
            src="http://img.petshow.cc/pet_show/2016_04/2a716d7a58144b1a7cd29b0df2f8a5cc.jpg"
            alt
          ><div class="mask"></div>
          <span>鹦鹉换羽的问题和注意事项</span>
        </van-swipe-item>
        <van-swipe-item>
          <img
            class="sImage"
            src="http://img.petshow.cc/pet_show/2016_04/340f0698b2c877fd889ff40b5a1cbf08.jpg"
            alt
          ><div class="mask"></div>
          <span>女王的最爱是柯基还是拉布拉多？</span>
        </van-swipe-item>
        <van-swipe-item> 
          <img
            class="sImage"
            src="http://img.petshow.cc/pet_show/2016_04/39331b3aeb38768423055ceb07528b80.jpg"
            alt
          ><div class="mask"></div>
          <span>家有喵星人上厕所不孤单 中枪的请举手</span>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 导航列表 -->
    <div class="pet_circle_nav">
      <ul class="pet_circle_nav_list">
        <li>
          <a href="#/fresh" title="宠物新鲜事" class="iconfont pet_nav_xinxianshi"></a>
          <span>新鲜事</span>
        </li>
        <li>
          <a href="#/knowledge" title="宠物涨知识" class="iconfont pet_nav_zhangzhishi"></a>
          <span>涨知识</span>
        </li>
        <li>
          <a href="#/scrawl" title="宠物看涂鸦" class="iconfont pet_nav_kantuya"></a>
          <span>看涂鸦</span>
        </li>
        <li>
          <a href="#/subject" title="宠物萌专题" class="iconfont pet_nav_mengzhuanti"></a>
          <span>萌专题</span>
        </li>
        <li>
          <a href="#/hairdressing" title="宠物美容" class="iconfont pet_nav_meirong"></a>
          <span>美容</span>
        </li>
        <li>
          <a href="#/hospital" title="宠物医院" class="iconfont pet_nav_yiyuan"></a>
          <span>医院</span>
        </li>
        <li>
          <a href="#/store" title="宠物店铺" class="iconfont pet_nav_dianpu"></a>
          <span>店铺</span>
        </li>
        <li  @click="changeshow">
          <a href="javascript:;" class="iconfont pet_nav_gengduo"></a>
          <span>更多</span>
        </li>
      </ul>
    </div>
    <!-- 详细信息 -->
    <home-info></home-info>
  <!-- 弹出框 -->
    <!-- <comment-popup/> -->
  </div>
</template>

<script>
import bus from '.././bus.js';
import { Swipe, SwipeItem } from "vant";
import commentPopup from ".././components/comment/commentPopup"
import homeInfo from ".././components/homeInfo"
export default {
  data() {
    return {
     
    }
  },
  components: {
    Swipe,
    SwipeItem,
    commentPopup,
    homeInfo
  },
  methods:{
    changeshow(){
      bus.$emit("isshow");
    }
  }
};
</script>

<style scoped>
.van-swipe {
  height: 45vw;
  position: relative;
}
.sImage {
  width: 100vw;
  height: 45vw;
}
.mask{
  position: absolute;
  background: url('../../static/image/flshadow.png') no-repeat;
  bottom: 0;
  z-index: 1;
  height: 70%;
  width: 100%;
  background-size: 100%;
}
.van-swipe span {
  position: absolute;
  bottom: 6vw;
  left: 3vw;
  color: #ffffff;
  font-size: 3.5vw;
  z-index: 2;
}
</style>